<template>
	<div>
		<!--搜索表单-->
		<div>
			<el-form ref="queryForm" :inline="true" :model="queryForm" size="mini" label-width="70px">
				<el-form-item label="订单编号" prop="orderId">
					<el-input v-model="queryForm.orderId" placeholder="请输入订单编号" clearable></el-input>
				</el-form-item>
				<el-form-item label="下单时间" prop="createTimeArray">
					<el-date-picker type="daterange" v-model="queryForm.createTimeArray" format="yyyy-MM-dd"
						value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"
						clearable></el-date-picker>
				</el-form-item>
				<el-form-item size="small">
					<el-button type="primary" @click="buildDeliveryTableData" >提交</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
			<!--订单数据-->
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="序号" type="index" width="50">
				</el-table-column>
				<el-table-column prop="orderId" label="订单编号" width="180">
				</el-table-column>
				<el-table-column prop="trackingNumber" label="快递单号" >
				</el-table-column>
				<el-table-column prop="suser.userName" label="出库人">
				</el-table-column>
				<el-table-column prop="order.consignee" label="订单收货人">
				</el-table-column>
				<el-table-column prop="order.phone" label="收货人手机号">
				</el-table-column>
				<el-table-column prop="order.totalMoney" label="订单总金额">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini"  @click="handleDetail(scope.row)">出库单详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryForm.pageNum" :page-sizes="[2, 5, 7, 9]" :page-size="queryForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total">
			</el-pagination>
		</div>
		
		<!-- 数据表单 -->
		<el-dialog :title="titleName" :visible.sync="formVisible">
			<el-descriptions title="订单基本资料" column="2">
				<el-descriptions-item label="订单编号">{{formData.orderId}}</el-descriptions-item>
				<el-descriptions-item label="订单类型">
					<span v-for="(item, index) in orderTypes" :key="index"
						v-if="item.dicDataVal == formData.order.orderType">{{item.dicDataLabel}}</span>
				</el-descriptions-item>

				<el-descriptions-item label="下单时间">
					<span>{{formData.createTime}}</span>
				</el-descriptions-item>

				<el-descriptions-item label="订单状态">
					<span v-for="(item, index) in states" :key="index"
						v-if="item.dicDataVal == formData.order.status">{{item.dicDataLabel}}</span>
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="收货人资料" column="2" size="medium">
				<el-descriptions-item label="收货人">{{formData.order.consignee}}</el-descriptions-item>
				<el-descriptions-item label="联系方式">{{formData.order.phone}}</el-descriptions-item>
				<el-descriptions-item label="邮政编码">{{formData.order.zipcode}}</el-descriptions-item>
				<el-descriptions-item label="收货地址">{{formData.order.area}}</el-descriptions-item>
				<el-descriptions-item label="收货区域">{{formData.order.region}}</el-descriptions-item>
				<el-descriptions-item label="支付方式">
					<span v-for="(item, index) in pays" :key="index"
						v-if="item.dicDataVal == formData.order.pay ">{{item.dicDataLabel}}</span>
				</el-descriptions-item>
				<el-descriptions-item label="配送方式">
					<span v-for="(item, index) in distributions" :key="index"
						v-if="item.dicDataVal == formData.order.distribution ">{{item.dicDataLabel}}</span>
				</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="商品详情" column="1" border="true">
				<el-descriptions-item colon="false">
					<el-table :data="formData.goodsDeliveryList" tooltip-effect="dark" border="true" style="width: 100%">
						<el-table-column prop="gcode" label="商品编码">
						</el-table-column>
						<el-table-column prop="imea" label="商品串码">
						</el-table-column>
						<el-table-column prop="goodsInfo.gname" label="商品名称">
						</el-table-column>
						<el-table-column prop="oneMoney" label="商品单价">
						</el-table-column>
					</el-table>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		//数据模板
		data() {
			return {
				//键值对
				queryForm: {
					orderId: '',
					createTimeArray: [],
					pageNum: 1,
					pageSize: 2,
					total: 0
				},
				tableData: [],
				//选中的行数据
				multipleSelection: [],
				orderTypes: [], //订单类型集合
				pays: [], // 支付方式集合
				states: [], //订单状态集合
				distributions: [], //配送方式
				formData: {
					order:{}
				},
				formVisible: false,
				titleName: '',
				isDelivery: false,
				dialogVisible: false,
				fileList: [],
				importResult: {
					orderNums: 0,
					orderSucNums: 0,
					orderErrorNum: 0,
					orderCommodityNums: 0,
					orderCommoditySucNums: 0,
					orderCommodityErrorNum: 0,
					bucketName: '',
					objectName: '',
				}

			};
		},
		//函数对象
		methods: {
			//重置表单
			resetForm() {
				this.$refs['queryForm'].resetFields()
				this.queryForm.deptId = null;
				this.buildDeliveryTableData();
			},
			// 表单查询
			querySubmit() {
				this.buildDeliveryTableData();
			},
			//发送查询语句
			buildDeliveryTableData() {
				axios.get("/delivery?" + this.qsString(this.queryForm)).then(response => {
					this.tableData = response.list;
					this.queryForm.pageNum = response.pageNum;
					this.queryForm.pageSize = response.pageSize;
					this.queryForm.total = response.total;
				})
			},
			// 正反选
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			//当前选中行
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//页面大小
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.buildDeliveryTableData();
			},
			//当前页数 
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.buildDeliveryTableData();
			},
			//详情表单
			handleDetail(row) {
				this.titleName = '出库单详情'
				axios.get("/delivery/deliveryGoods/"+row.deliveryId).then(resp=>{
					this.formData = resp.data;
					this.formVisible = true
					this.isDelivery = true
				})
			},
			handleChange(file, fileList) {
				this.fileList = fileList;
			},
			handleRemove(file, fileList) {
				this.fileList = fileList;
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			showImportDialog() {
				this.dialogVisible = true;
			},
		},
		//各种钩子函数
		mounted() {
			this.getDictItems("order_type").then(resp => {
				this.orderTypes = resp.data;
			});
			this.getDictItems("cnee_DeliMethod").then(resp => {
				this.pays = resp.data;
			});
			this.getDictItems("order_state").then(resp => {
				this.states = resp.data;
			});
			this.getDictItems("cnee_deli_way").then(resp => {
				this.distributions = resp.data;
			});
			this.buildDeliveryTableData();
		}
	}
</script>

<style>
</style>
